<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>myhead</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}		
			.mui-content{
				background-color:rgb(117,195,235);
			}
			.mui-card-content{
				background-color: lightsteelblue;
			}
			.mui-card-content-inner{
				padding: 20px 7px;
			}
			.mui-inline{
				padding: 2px;
			}
			.mui-icon-image{
				height: 80px;
				border-radius:50%;
			}
		</style>
	</head>

	<body onload="onloadbody()">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的头像</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div id="myheadimg" class="mui-card-content-inner">
						
					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<button id='addheadimg' class="mui-btn mui-btn-block mui-btn-primary">添加头像</button>
			</div>		
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/DHJ.js"></script>
		<script>
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			//初始化方法
			function onloadbody(){
				var myhead = document.getElementById("myheadimg");
				var str = "";
				var listimg = ["01","02","03","04","05","06","07","08","09"];
//				<div class="mui-inline">
//					<img class="mui-icon-image" src="img/head/02.jpg"/>
//				</div>
				for(var i=0;i<listimg.length;i++) {
					str += "<div class='mui-inline'><img class='mui-icon-image' src='img/head/"+listimg[i]+".jpg'/></div>";
				}
				myhead.innerHTML=str;
			};
			
			//绑定点击事件
			mui(".mui-content").on('tap','.mui-icon-image',function(){
				var imgsrc = this.src;
				var uid = localStorage.getItem("uid");
				mui.ajax({
					url:locationIP+"changeHead",
					data:{
						uhead:imgsrc,
						uid:uid
					},
					dataType:'json',
					type:'post',
					success:function(data){
						//查看获取的数据状态
						console.log(JSON.stringify(data));
						if(data>0){							
								mui.openWindow({
									id:'user_change.html',
									url:'user_change.html'
								});							
						}else{
							mui.alert("修改失败");
						};																
					},
					error: function(xhr,type,errorThrown){
		                mui.toast(type);
		            }
				});
				
			});
			
			/*更换头像功能*/ 
//		document.getElementById('head_change').addEventListener('tap', function() { 
//		    if(mui.os.plus) { 
//		        var a = [{ 
//		            title: "拍照" 
//		    }, { 
//		        title: "从手机相册选择" 
//		    }]; 
//		    plus.nativeUI.actionSheet({ 
//		        title: "修改用户头像", 
//		        cancel: "取消", 
//		        buttons: a 
//		    }, function(b) { /*actionSheet 按钮点击事件*/ 
//		        switch(b.index) { 
//		        case 0: 
//		            break; 
//		        case 1: 
//		            getImage(); /*拍照*/ 
//		            break; 
//		        case 2: 
//		            galleryImg(); /*打开相册*/ 
//		            break; 
//		        default: 
//		            break; 
//		        } 
//		    }) 
//		    } 
//		}, false); 
//		//拍照 
//		function getImage() { 
//		    var cmr = plus.camera.getCamera(); 
//		    var res = cmr.supportedImageResolutions[0]; 
//		    var fmt = cmr.supportedImageFormats[0]; 
//		    cmr.captureImage(function(path) { 
//			        //plus.io.resolveLocalFileSystemURL(path, function(entry) {   
//			    plus.io.resolveLocalFileSystemURL(path, function(entry) { 
//			        var localUrl = entry.toLocalURL(); 
//			        uploadHead(localUrl + "?version=" + new Date().getTime()); 
//			    }, function(err) { 
//			        console.error("拍照失败：" + err.message); 
//			    }, { 
//			        index: 1 
//			    }); 
//		    }); 
//		}  
//		//本地相册选择 
//		function galleryImg() { 
//		    plus.gallery.pick(function(a) { 
//		    plus.io.resolveLocalFileSystemURL(a, function(entry) { 
//		        plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
//		        root.getFile("head.png", {}, function(file) { 
//		            //文件已存在 
//		            file.remove(function() { 
//		            console.log("file remove success"); 
//		            entry.copyTo(root, 'head.png', function(e) { 
//		                var e = e.fullPath + "?version=" + new Date().getTime(); 
//		                uploadHead(e); /*上传图片*/ 
//		                //变更大图预览的src 
//		                //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现 
//		                },function(e) { 
//		                            console.log('copy image fail:' + e.message); 
//		            }); 
//		            }, function() { 
//		            console.log("delete image fail:" + e.message); 
//		            }); 
//		        }, function() { 
//		            //文件不存在 
//		            entry.copyTo(root, 'head.png', function(e) { 
//		            var path = e.fullPath + "?version=" + new Date().getTime(); 
//		            uploadHead(path); /*上传图片*/ 
//		            },function(e) { 
//		            console.log('copy image fail:' + e.message); 
//		            }); 
//		        }); 
//		        }, function(e) { 
//		        console.log("get _www folder fail"); 
//		        }) 
//		    }, function(e) { 
//		        console.log("读取拍照文件错误：" + e.message); 
//		    }); 
//		    }, function(a) {}, { 
//		    filter: "image" 
//		    }) 
//		}; 
//		 
//		//上传头像图片 B5教程网 www.bcty365.com 
//		function uploadHead(imgPath) { 
//		    var image = new Image(); 
//		    image.src = imgPath; 
//		    image.onload = function() { 
//		    var imgData = getBase64Image(image); 
//		    console.log(imgData); 
//		    /*在这里调用上传接口*/ 
//		    //mui.ajax("图片上传接口", { 
//		        //data: { 
//		        //img: imgData 
//		        //}, 
//		        //dataType: 'json', 
//		        //type: 'post', 
//		        //timeout: 10000, 
//		        //success: function(data) { 
//		        //mui.toast('上传成功',{ 
//		            //duration:'long', 
//		            //type:'div' 
//		        //}); 
//		                //document.getElementById('head-img').src = imgPath; 
//		        //document.getElementById('head-img1').src = imgPath; 
//		        //document.getElementById('head-img2').src=imgPath; 
//		        //},  
//		            //error: function(xhr, type, errorThrown) { 
//		        //mui.toast('网络异常，请稍后再试！'); 
//		        //} 
//		    //}); 
//		    } 
//		} 
//		//将图片压缩转成base64 
//		function getBase64Image(img) { 
//		    var canvas = document.createElement("canvas"); 
//		    var width = img.width; 
//		    var height = img.height; 
//		    // calculate the width and height, constraining the proportions 
//		    if(width > height) { 
//		    if(width > 100) { 
//		        height = Math.round(height *= 100 / width); 
//		        width = 100; 
//		    } 
//		    } else { 
//		    if(height > 100) { 
//		        width = Math.round(width *= 100 / height); 
//		        height = 100; 
//		    } 
//		    } 
//		    canvas.width = width; /*设置新的图片的宽度*/ 
//		    canvas.height = height; /*设置新的图片的长度*/ 
//		    var ctx = canvas.getContext("2d"); 
//		    ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
//		    var dataURL = canvas.toDataURL("image/png", 0.8); 
//		    return dataURL.replace("data:image/png;base64,", ""); 
//		} 
		</script>
	</body>
</html>